<template>
  <div class="person-container">
    <span class="title">个人申请与审核</span>
    <el-divider></el-divider>
    <div class="form">
      <el-form
        :inline="true"
        label-position="right"
        label-width="80px"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="姓名">
          <el-input v-model="formInline.user" placeholder="请填写真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="formInline.idCard" placeholder="请填写真实身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="所在区县">
          <el-select width="185" v-model="formInline.a" placeholder="--请选择--">
            <el-option label="全部" value="1"></el-option>
            <el-option label="区域一" value="2"></el-option>
            <el-option label="区域二" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在乡镇">
          <el-select v-model="formInline.b" placeholder="--请选择--">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在乡村">
          <el-select v-model="formInline.c" placeholder="--请选择--">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="复垦类型">
          <el-select v-model="formInline.type" placeholder="--请选择--">
            <el-option label="全部" value="0"></el-option>
            <el-option label="建卡贫困户" value="1"></el-option>
            <el-option label="户改退地" value="2"></el-option>
            <el-option label="异地扶贫搬迁" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="--请选择--">
            <el-option label="全部" value="0"></el-option>
            <el-option label="暂未审核" value="1"></el-option>
            <el-option label="审核未通过" value="2"></el-option>
            <el-option label="审核通过、暂未复垦" value="3"></el-option>
            <el-option label="审核通过、已复垦" value="4"></el-option>
            <el-option label="审核通过、签订协议签前退出复垦" value="5"></el-option>
             <el-option label="审核通过、签订协议签后退出复垦" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-button type="primary" @click="addClick">
        <i class="el-icon-plus"></i> 添加
      </el-button>
      <div class="table-box">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="styleObj">
          <el-table-column fixed prop="date" label="序号" width="150"></el-table-column>
          <el-table-column prop="name" label="申请编号" width="120"></el-table-column>
          <el-table-column prop="province" label="姓名" width="120"></el-table-column>
          <el-table-column prop="city" label="身份证号码	" width="120"></el-table-column>
          <el-table-column prop="address" label="通讯地址	" width="300"></el-table-column>
          <el-table-column prop="zip" label="手机号码	" width="120"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="sqxqClick(scope.row)" type="text" size="small">申请详情</el-button>
              <el-button @click="shxqClick(scope.row)" type="text" size="small">审核详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="1000"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      styleObj: {
        background: "rgba(245,247,250,1)"
      },
      formInline: {
        user: "",
        a: "",
        b: "",
        c: "",
        idCard: "",
        state: "",
        type: ""
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333
        }
      ],
      currentPage3: 5
    };
  },
  methods: {
    onSubmit() {
    },
    addClick() {
      this.$router.push({ name: "个人申请详情" });
    },
    sqxqClick(row) {
      this.$router.push({ name: "个人申请详情", query: { way: row } });
    },
    shxqClick(row) {
      this.$router.push({ name: "个人审核详情", query: { way: row } });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.person-container {
  padding: 20px;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: rgba(72, 73, 77, 1);
    line-height: 33px;
  }
}
.table,
.table-box {
  margin-top: 20px;
  .block {
    float: right;
    margin: 30px;
  }
}
</style>
